<template>
  <div class="login">
    <div class="box">
      <van-form @submit="onSubmit">
        <!-- 登录页面头像 -->
        <div class="userimg" v-if="isshow">
          <van-image
            round
            width="80"
            height="80"
            :src="user_img"
            v-if="user_img != ''"
          />
        </div>

        <!-- 注册页面头像 -->
        <div class="userimg" v-if="!isshow">
          <user-tx :onBan="onBan" />
          <!--传输一个函数到user-tx路由-->
        </div>

        <van-cell-group inset>
          <!-- 邮箱输入框 -->
          <van-field
            v-model="mail"
            type="email"
            name="mail"
            label="邮箱"
            placeholder="请输入邮箱"
            :rules="[{ required: true, validator: Email }]"
          />
          <!-- 注册页面用户名输入框 -->
          <van-field
            v-if="!isshow"
            v-model="username"
            type="text"
            name="userName"
            label="用户名"
            placeholder="请输入用户名"
            :rules="[{ required: true }]"
          />
          <!-- 注册or登录共享的密码输入框 -->
          <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true }]"
          />
          <van-field
            v-model="password2"
            type="password"
            name="password"
            label="确认密码"
            v-if="!isshow"
            placeholder="请重复上面的密码"
            :rules="[{ required: true, validator: ispassword }]"
          />
          <van-field
            v-model="sms"
            v-if="!isshow"
            center
            clearable
            label="邮箱验证码"
            name="sms"
            :rules="[{ required: true }]"
            placeholder="请输入邮箱验证码"
          >
            <template #button>
              <div @click="smsBy">{{ text }}</div>
            </template>
          </van-field>
        </van-cell-group>
        <!-- 登录和注册按钮 -->
        <div style="margin: 16px">
          <van-button
            round
            block
            native-type="submit"
            :loading-text="isshow ? '登录' : '注册' + '中...'"
            :loading="loading"
          >
            {{ isshow ? "登录" : "注册" }}
          </van-button>
        </div>
      </van-form>
      <!-- 登录和注册页面互换按钮 -->
      <div class="x">
        <div @click="findpassword" class="forgotPassword">忘记密码</div>
        <div class="forgotPassword"></div>
        <div @click="isshow = !isshow" class="xuehuan">
          {{ isshow ? "注册" : "登录" }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Form, Field, CellGroup } from "vant";
import auth from "@/api/auth";
import { headImage } from "@/api/user";
import userTx from "@/components/user/userTx.vue";
import { mapMutations } from "vuex";
export default {
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [userTx.name]: userTx,
  },
  data() {
    return {
      loading: false,
      isshow: true,

      username: "",
      password2: "",
      password: "",
      user_img: "",
      headImage: "",
      sms: "",
      base64: "",
      mail: "",

      text: "发送验证码",
      isSMS: false,
      smsTime: 60,
    };
  },
  created() {},
  methods: {
    ...mapMutations(["getUserInfo"]),

    //发送验证码
    smsBy() {
      if (this.mail == "" || this.mail == undefined) {
        return this.$Toast.fail("请输入邮箱");
      }
      if (this.isSMS) {
        return this.$Toast(this.smsTime + "秒后重新发送");
      }
      this.isSMS = true;
      auth
        .verificationMail({
          mail: this.mail,
          type: this.isshow ? "login" : "reg",
        }).then(res => {
          if(res.code != 200){
            this.isSMS = false;
            this.smsTime = 60;
            this.text = "发送验证码";
            clearInterval(sics);
          }
        })
      var sics = setInterval(() => {
        if (this.smsTime <= 0) {
          this.isSMS = false;
          this.smsTime = 60;
          this.text = "发送验证码";
          clearInterval(sics);
        } else {
          this.smsTime--;
          this.text = this.smsTime + "秒后重新发送";
        }
      }, 1000);
      this.text = this.smsTime + "秒后重新发送"
    },
    // 提交
    onSubmit(data) {
      if (this.loading) {
        return;
      }

      if (this.isshow) {
        //true执行登录操作，false执行注册操作
        this.userlogin(data);
      } else {
        if (this.password2 != this.password) {
          return this.$Toast.fail("二次密码必须一致");
        }
        this.newlogin(data);
      }
      this.loading = true;
    },

    // 登录
    userlogin(data) {
      auth.login(data).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.$router.push("/home");
          this.getUserInfo();
        }
      });
    },
    // 注册
    newlogin(data) {
      if (this.base64) {
        data.base64 = this.base64;
      } else if (this.headImage) {
        data.userImage = this.headImage;
      }
      auth.register(data).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.$router.push("/home");
          this.getUserInfo();
        }
      });
    },
    // 找回密码
    findpassword() {
      this.$router.replace("/findpassword");
    },
    // 密码校验
    ispassword() {
      if (this.isshow) {
        return true;
      }
      return true;
    },
    // 邮箱校验
    Email(mail) {
      if (this.isshow) {
        headImage({
          mail,
        }).then((r) => {
          if (r.code == 200) {
            if (this.isshow) {
              this.user_img = this.$ip + r.data;
            } else {
              return false;
            }
          } else {
            this.user_img = "";
          }
        });
      }
      return true;
    },
    //获取头像
    onBan(url, base64) {
      if (url == "base64") {
        this.base64 = base64;
        this.headImage = "";
      } else {
        this.headImage = url;
        this.base64 = "";
      }
    },
  },
};
</script>

<style scoped>
.login {
  position: relative;
  height: calc(100vh);
  width: 100vw;
  overflow: hidden;
  text-align: center;
  background: var(--homeTop);
}
.title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 25px;
  font-style: italic;
}
.box {
  width: 100vw;
  height: 540px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.userimg {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
}
.x {
  width: calc(100% - 32px);
  margin: 10px 16px;
}
.xuehuan,
.forgotPassword {
  display: inline-block;
  color: #fff;
  text-align: center;
}
.forgotPassword {
  margin-right: 60px;
  color: #fff;
}
</style>
